<template>
	<div class="modify-dialog">
		<slot> </slot>
		<el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
			<div class="parseWrap">
				<div
					class="imgWrap"
					@mousewheel="onWheel"
					@mousedown="onDown"
					@mousemove="onMove"
					@mouseup="onUp"
					ref="imgWraperRef"
				>
					<div class="imgBox" :style="{ scale }">
						<img
							:draggable="false"
							@mousedown="onImgTouch"
							@mousemove="onImgTouch"
							@mouseup="onImgTouch"
							:src="imgSrc"
							ref="imgRef"
							@load="onLoad"

						/>
						<div
							:class="['text', curIndex == i && 'active']"
							v-for="(e, i) in texts"
							@click="onItem2(e, i)"
							:style="{
								left: `${e.location.left}px`,
								top: `${e.location.top}px`,
								width: `${e.location.width}px`,
								height: `${e.location.height}px`,
							}"
							:key="i"
						></div>
					</div>
				</div>
				<div class="textWrap">
					<div class="textList" ref="textRef">
						<div
							@click="onItem(e, i)"
							:class="['textItem', i == textIndex && 'active']"
							v-for="(e, i) in newTexts"
							:key="i"
						>
							<span class="value">{{ e.words }}</span>
							<span class="index">x{{ e.count }}</span>
						</div>
					</div>
					<div class="tool">
						<div class="stepper">
							<el-slider
								v-model="scale"
								:min="min"
								:max="max"
								:step="0.01"
								:marks="{
									1: '1',
									[min]: `${min}`,
									[max]: `${max}`,
								}"
							></el-slider>
						</div>
						<el-button
							style="margin-left: 20px"
							type="primary"
							size="mini"
							@click="onLoad"
						>
							自适应
						</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";

let X = 0;
let Y = 0;
let drag = false;
export default {
	mixins: [modifyMixins],
	data() {
		return {
			dialogTop: "2vh",
			dialogWidth: "96vw",
			form: {},
			texts: [],
			scale: 1,
			autoScale: 1,
			min: 0.1,
			max: 5,
			dirs: [],
			curIndex: -1,
			textIndex: -1,
		};
	},
	computed: {
		newTexts() {
			const map = {};
			this.texts.forEach((e) => {
				if (map[e.words]) map[e.words] += 1;
				else map[e.words] = 1;
			});
			return Object.keys(map).map((words) => ({ words, count: map[words] }));
		},
		total() {
			return this.dirs.reduce((a, b) => a + b.count, 0);
		},
		imgSrc() {
			const { modify, $imgHost, row } = this;
			const { cadImg, storageImg, goodsOfferImg,storageOfferImg} = row;
			console.log(row)
		    if(modify == 'goodsOfferDetail'){
               return $imgHost + goodsOfferImg;
			}else if(modify =='storageOffer'){
               return $imgHost + storageOfferImg;
			}else{
				return $imgHost + (modify == "goodsDetail" ? cadImg : storageImg);
			}

		},
		title() {
			if(this.modify == "goodsOfferDetail"){
             return '营业区报价解析'
			}else if(this.modify == 'storageOffer'){
				  return '仓储区报价解析'
			}else{
				return this.modify == "goodsDetail" ? "货架解析详情" : "仓储解析详情";
			}

		},
	},
	watch: {},
	mounted() {},
	methods: {
		onDown(e) {
			const { screenX, screenY } = e;
			X = screenX;
			Y = screenY;
			drag = true;
		},
		onMove(e) {
			const { screenX, screenY } = e;
			if (drag) {
				const ref = this.$refs.imgWraperRef;
				if (ref) {
					ref.scrollLeft = ref.scrollLeft - (screenX - X);
					ref.scrollTop = ref.scrollTop - (screenY - Y);
					X = screenX;
					Y = screenY;
				}
			}
		},
		onUp(e) {
			X = 0;
			Y = 0;
			drag = false;
		},
		onWheel(e) {
			const { deltaY } = e;
			const { scale } = this;
			const { sub, div } = this.$quinn.$acc;
			this.scale = sub(scale, div(deltaY, 500));
			e.preventDefault();
			return false;
		},
		onImgTouch(e) {
			e.preventDefault();
			return false;
		},
		onLoad() {
			this.$nextTick(() => {
				const ref = this.$refs.imgWraperRef;
				const imgRef = this.$refs.imgRef;
				if (ref && imgRef) {
					const r1 = ref.offsetWidth / imgRef.offsetWidth;
					const r2 = ref.offsetHeight / imgRef.offsetHeight;
					this.autoScale = parseFloat((r1 < r2 ? r1 : r2).toFixed(2));
					this.scale = this.autoScale;
					ref.scrollLeft = (imgRef.offsetWidth - ref.offsetWidth) * 0.5 + 10;
					ref.scrollTop = (imgRef.offsetHeight - ref.offsetHeight) * 0.5 + 10;
				}
			});
		},
		onItem2(e, i) {
			this.curIndex = i;
			this.textIndex = this.newTexts.findIndex((item) => item.words == e.words);
			const ref = this.$refs.textRef;
			if (ref) {
				ref.scrollTop = 45 * this.textIndex;
			}
		},
		onItem(e, i) {
			this.textIndex = i;
			this.curIndex = this.texts.findIndex((item) => item.words == e.words);
			const { left, top } = this.texts[this.curIndex].location;
			const ref = this.$refs.imgWraperRef;
			if (ref) {
				// console.log(left, top);
				// ref.scrollLeft = left * this.scale;
				// ref.scrollTop = top * this.scale;
			}
		},
		onStep(step = 0.1) {
			const { scale, min, max } = this;
			let res = this.$quinn.$acc.add(scale, step);
			if (res <= min) res = min;
			else if (res >= max) res = max;
			this.scale = res;
		},
		showDialog(modify = "add", row = {}) {
			if (modify != this.modify) this.scale = 1;
			this.curIndex = -1;
			this.textIndex = -1;
			this.dialogVisible = true;
			this.row = row;
			this.modify = modify || "add";
			// newCadParseTexts
			let type= ''
			if(modify !='goodsOfferDetail'){
			 type=	modify.replace("Detail", "");
			}else{
			 type = 'offer'
			}
			this.$api["orderGoodsDirectorys"]({
				orderId: row.id,
				type:type
			}).then((res) => {
				this.dirs = res?.dirs || [];
				this.texts = res?.texts || [];
			});
		},
		onSubmit(form) {
			// this.$api["newOrderUpdate"](form).then(this.submitDoneMsg);
		},
	},
};
</script>

<style lang="less" scoped>
.parseWrap {
	height: calc(96vh - 100px);
	display: flex;
	.imgWrap {
		flex: 1;
		overflow: auto;
		background: #333;
		position: relative;
		cursor: grab;
		&:active {
			cursor: grabbing;
		}
		.imgBox {
			width: max-content;
			position: relative;
			transition: all 0.2s linear;
			.text {
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
				border: 5px solid #2165ff;
        //border: 5px solid #00BD01;
				border-radius: 4px;
				width: 5px;
				height: 5px;
				cursor: pointer;

				// z-index: -1;
				&.active {
					border-width: 4px;
					background: rgba(0, 0, 255, 0.2);
				}
			}
		}
	}
	.textWrap {
		width: 180px;
		height: 100%;
		position: relative;
		.textList {
			height: 100%;
			overflow-y: auto;
			padding: 10px;
			border-radius: 10px;
			color: #666;
			.scrollBar-0;

			.textItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 13px;
				cursor: pointer;
				height: 45px;
				&.active {
					border-radius: 10px;
					background: #666;
					color: white;
				}
			}
		}
		.tool {
			position: absolute;
			bottom: 30px;
			left: -300px;
			z-index: 999;
			padding: 6px;
			border-radius: 10px;
			width: 250px;
			display: flex;
			align-items: center;
			.stepper {
				flex: 1;
			}
			// .scale {
			// 	font-size: 14px;
			// 	width: 30px;
			// 	text-align: center;
			// }
			// span {
			// 	cursor: pointer;
			// }
		}
	}
}
</style>

